<template>
  <div>

    <el-container>
      <el-header>
        <div class="top-left">
          <Avatar
            :username="name"
            :src="name"

            backgroundColor="skyblue"
            color="#fdfdff"
            style="vertical-align: middle"

            :inline="true"
          />

          <span>冯洋</span>
        </div>

        <span><strong>收件箱</strong> </span>
      </el-header>
      <el-container>
        <el-aside width="150px">
          <ul><strong>好友列表</strong>

          <li v-for="(obj,index) in  obj" :key="index">{{obj.name}}</li>
        </ul>
      </el-aside>
        <el-container>
          <el-main></el-main>
          <el-footer><sendtextVue/></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import Avatar from "vue-avatar";
import sendtextVue from "./sendtext.vue";
import person from "../../api/ws/request";
export default {
  name: "VueCli2Newchat",
  components: {
    Avatar,
    sendtextVue
  },

  data() {
    return {


      name: "冯洋",
      result: {},

      obj:this.$route.params.data.initMessage.userList,
    };
  },
  mounted(){
        console.log(person);
  },
  methods:{

  }
};
</script>

<style lang="less" scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 10vh;
    height: 10vh !important;
  }

  /deep/ .el-footer {
    background-color: #B3C0D1;
    color: #333;

    line-height: 60px;
    height: 30vh !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: 60vh;
  }

  *{
    padding: 0;
    margin: 0;
  }
  .top-left {
    float: left;
    color: #fdfdfd;
    margin-left: 40px;
    line-height: 10vh;

    overflow: hidden;
  }


.cen{
 position: relative;
 display: flex;
 height: auto;
 width: 1280px;
 margin: 0 auto;
 & > .cen-left{
   flex: 1;
   width: 70px;
   height: auto;
   background: rgb(86, 134, 197);
 }
  &>.cen-right{
    flex: 18;
    // width: 700px;
    height: 400px;
    background: palegoldenrod;
    // right: 40px;
 }
 &>.nav{
   flex: 2;
   height: 91vh;
  overflow-y: scroll;

   }
 }

 ul{
  font-size: large;
  & >li{
    list-style: none;
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    font-size: medium;
    text-align: center;
   &:hover{
     background: skyblue;
     color: #FFf;

   }
  }
}


</style>

